<template>
	<view>
		<view class="news-list">
			<view class="news-item" v-for="item in list" @click="navTo('pages/village/news/show',{id:item.id})">
				<view class="left">
					<u-image radius="5" width="90" height="80" :src="item.coverImageUrl" mode="aspectFill"></u-image>
				</view>
				<view class="right">
					<view class="title">{{item.title}} </view>
					<!-- <view class="tags mt-5">
						<text v-for="v in item.tags">{{v}}</text>
					</view> -->
					<view class="description line-2 mt-10">{{item.summary}}</view>
					<view class="metas mt-20">
					<!-- <view><u-icon :customStyle="{marginRight:'5px'}" name="account"></u-icon>{{item.author}}</view> -->
					<view><u-icon :customStyle="{marginRight:'5px'}" name="clock" ></u-icon>{{item.publishTime}}</view>
					<view><u-icon :customStyle="{marginRight:'5px'}" name="eye" ></u-icon>{{item.viewCount}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { getNews } from '@/config/api.js'
	export default {
		data() {
			return {
				loading:false,
				page:1,
				size:10,
				status: 'loadmore',
				list:[],
			}
		},
		onLoad(){
			this.getList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'loadmore';
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			tabsClick(item) {
				this.page = 1;
				this.status = 'loadmore';
				this.search.businessType = item.value;
				this.getList(true);
			},
			async getList(isRefresh = false){
				if(this.status === 'loading' || this.status === 'nomore'){
					return;
				}
				this.status = 'loading';
				const res = await getNews({params:{page:this.page,size:this.size}});
				const list =  res._embedded?.items || [];
				if(isRefresh){
					this.list = list;
					uni.stopPullDownRefresh()
				}else{
					this.list = this.list.concat(list);
				}
				this.status = res.page.totalElements <= ((res.page.number -1) * res.page.size + list.length) ? 'nomore' : 'loadmore';
				this.page = this.page+1;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.tabs-box{
		background-color: #f7f7f7;
		position: fixed;
		width:100%;
		height:44px;
		left:0;
		top:44px;
		z-index:999;
	}
	.news-list{
		.news-item{
			background-color: white;
			padding:20rpx 30rpx;
			border-radius:5px;
			display: flex;
			align-items: stretch;
			border-bottom: 1rpx solid #eee;
			.left{
				
			}
			.right{
				padding-left:30rpx;
				flex-grow: 1;
				.title{
					font-size:15px;
				}
				.tags{
					margin:-10rpx;
					text{
						display: inline-block;
						padding:1px 8px;
						border-radius: 5px;
						background-color: #f7f7f7;
						font-size:12px;
						margin:10rpx;
						color:#888888;
					}
				}
				.description{
					font-size:24rpx;
					color:#888888;
				}
				.metas{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: -10rpx;
					margin-right: -10rpx;
					&>text,&>view{
						font-size:24rpx;
						margin:0 10rpx;
						color:#555555;
					}
					view{
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>